<template>
	<z-paging ref="paging" v-model="searchData" @query="queryList" :show-loading-more-no-more-view="false"  :default-page-size="15" inside-more>
		<template slot="top">
			<cl-navbar autoBack placeholder :title="$t('chat.msg.type.audio')"></cl-navbar>
		</template>
		<view style="padding: 0 30rpx;">
			<view v-for="(item, index) in searchData" :key="index" style="margin-bottom: 30rpx;">
				<view class="content">
					<cl-avatar :src="isMe(item.sender_id) ? user_info.avatar_url : userInfoOther(item) && userInfoOther(item).avatar_url || ''"
						size="100rpx"></cl-avatar>
					<view style="margin-left: 20rpx;flex: 1;">
						<view style="font-size: 24rpx;color: #595A66;display: flex;justify-content: space-between;margin-bottom: 10rpx;">
							<span>{{isMe(item.sender_id) ? user_info.nick_name : userInfoOther(item) && (userInfoOther(item).group_nickname || userInfoOther(item).user_nickname)}}</span>
							<span>{{formatSendTime(item.create_time)}}</span>
						</view>
						<cl-chat-audio :audiodata="item.content_text[0].audio" :msg_id="item.msg_id"></cl-chat-audio>
					</view>
				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	import msgSqlite from '@/sqlite_services/msg.js'
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		replaceEmojis
	} from '@/components/cl-chat-input/o-emoji/emoji.js';
	import {formatSendTime} from '@/common/chatMsgTime.js'
	export default {
		name: 'chatHistory',
		data() {
			return {
				searchval:'',
				searchData:[],
			}
		},
		computed: {
			...mapState({
				chatInfo: state => state.chat.chatInfo,
				user_info: state => state.user.user_info,
				groupMemberInfo: state => state.groupMembersInfo.groupMemberInfo,
			}),
			userInfoOther() {
				return (item) => {
					if (item.msg_type == 'sys_notice') {
						return null
					}
					let useitem = this.groupMemberInfo[item.sender_id]
					console.log(useitem);
					if (useitem) {
						return useitem
					}else{
						this.fetchGroupUserInfo({
							userId: item.sender_id,
							groupId:this.chatInfo.uuid
						});
					}
					return null
				}
			},
			isMe() {
				return (uuid) => {
					if (uuid == this.user_info.user_id) return true
					return false
				}
			}
		},
		onLoad() {
		},
		methods: {
			...mapActions(['fetchGroupUserInfo']),
			formatSendTime,
			queryList(pageNo, pageSize){
				let offset = this.searchData.length
				if(pageNo == 1){
					offset = 0
				}
				
				msgSqlite.getMsgSortList({
					chat_type:'group',
					msg_type:'audio',
					uuid:this.chatInfo.uuid
				},{
					pageSize,
					offset
				}).then(results => {
					console.log(results);
					if (results) {
						results.map(result => {
							result.content_text = JSON.parse(result.content_text)
						});
						this.$refs.paging.complete(results);
					}
				}).catch(e => {
					this.$refs.paging.complete(false);
				})
			},
		},
	};
</script>

<style scoped lang="scss">
	.content {
		display: flex;
		align-items: center;
	}
</style>